<template>

  <tab-bar>
    <!-- 匿名插槽 -->
    <template #default>

      <tab-bar-item path="/home">
        <!-- 在每个tab-bar-item组件里面使用具名插槽进行内容替换 -->
        <template #item-icon>
          <img src="~assets/img/tabbar/home.svg" alt="">
        </template>
        <template #item-icon-active>
          <img src="~assets/img/tabbar/home_active.svg" alt="">
        </template>
        <template #item-text>
          <p>首页</p>
        </template>
      </tab-bar-item>

      <tab-bar-item path="/category">
        <template #item-icon>
          <img src="~assets/img/tabbar/category.svg" alt="">
        </template>
        <template #item-icon-active>
          <img src="~assets/img/tabbar/category_active.svg" alt="">
        </template>
        <template #item-text>
          <p>分类</p>
        </template>
      </tab-bar-item>

      <tab-bar-item path="/cart">
        <template #item-icon>
          <img src="~assets/img/tabbar/shopcart.svg" alt="">
        </template>
        <template #item-icon-active>
          <img src="~assets/img/tabbar/shopcart_active.svg" alt="">
        </template>
        <template #item-text>
          <p>购物车</p>
        </template>
      </tab-bar-item>

      <tab-bar-item path="/profile">
        <template #item-icon>
          <img src="~assets/img/tabbar/profile.svg" alt="">
        </template>
        <template #item-icon-active>
          <img src="~assets/img/tabbar/profile_active.svg" alt="">
        </template>
        <template #item-text>
          <p>我的</p>
        </template>
      </tab-bar-item>

    </template>
  </tab-bar>

</template>

<script>
  import tabBar from 'components/common/tabbar/TabBar.vue'
  import tabBarItem from 'components/common/tabbar/TabBarItem.vue'

    export default {
        name: "",
        components: {
          tabBar,
          tabBarItem
        }
    }
</script>

<style scoped>

</style>
